<!-- 客户详情-业务员 -->
<template>
  <div class="bussiness-manager">
    <a-space
      :style="{
        marginBottom: '10px',
      }"
    >
      <a-button
        :style="{
          height: '40px',
        }"
        type="primary"
        @click="showModal"
      >
        <template #icon>
          <icon-plus />
        </template>
        <template #default>新增业务员</template>
      </a-button>
    </a-space>

    <tableTurn
      :tableData="getData"
      :args="args"
      ref="tableTurnRef"
      :isShowPagination="false"
    >
      <a-table-column align="center" :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>

      <a-table-column title="业务员(经理)" dataIndex="staffName" align="center">
      </a-table-column>
      <a-table-column title="起止时间" dataIndex="createdAt" align="center">
        <template #cell="{ record }">
          {{
            `${dayjs(record.createdAt).format('YYYY-MM-DD')} —— ${
              record.endTime === 0
                ? '至今'
                : dayjs(record.endTime).format('YYYY-MM-DD')
            }`
          }}
        </template>
      </a-table-column>
      <a-table-column
        :width="150"
        title="操作"
        dataIndex="record"
        align="center"
      >
        <template #cell="{ record }">
          <a-tooltip content="编辑">
            <IconFont
              type="icon-edit"
              :size="26"
              :style="{
                marginRight: '10px',
                cursor: 'pointer',
              }"
              @click="goDetail(record)"
            />
          </a-tooltip>

          <a-tooltip content="删除">
            <a-popconfirm
              @ok="del(record.id)"
              content="确定删除吗"
              type="error"
            >
              <IconFont
                type="icon-delete"
                :size="26"
                :style="{
                  marginRight: '10px',
                  cursor: 'pointer',
                }"
              />
            </a-popconfirm>
          </a-tooltip>
        </template>
      </a-table-column>
    </tableTurn>
  </div>

  <addBusiness
    v-model:visible="isShowModal"
    @addSalesmanEmit="addSalesmanEmit"
    :detailInfo="currDetailInfo"
  ></addBusiness>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { GetClientDetailTabs } from '@/api/order-management/client-management/client-list';
  import { useRoute } from 'vue-router';
  import {
    GetClientList,
    postClientSalesman,
    delClientSalesman,
  } from '@/api/order-management/client-management/client-list';
  import dayjs from 'dayjs';
  import addBusiness from './components/add-business/index.vue';

  const route = useRoute();
  let clientId = Number(route.query.id);
  const isShowModal = ref(false);
  const props = withDefaults(
    // 参数说明
    defineProps<{
      salesName: string;
    }>(),
    {}
  );
  const tableTurnRef = ref();

  const currDetailInfo = ref({});
  const addSalesmanEmit = async (data: any) => {
    await postClientSalesman({ ...data, customerId: Number(route.query.id) });
    tableTurnRef.value.loadData();
  };
  // 表格配置
  const args = reactive({
    stripe: true,
    scroll: {
      y: 500,
    },
    bordered: {
      headerCell: true,
    },
  });
  // 获取数据
  const getData = async (pageData?: any) => {
    try {
      const res = await GetClientDetailTabs({
        id: clientId,
        typeId: 2,
        pageData: {
          page: 0,
          size: -1,
        },
      });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  const goDetail = (record: any) => {
    isShowModal.value = true;
    currDetailInfo.value = record;
  };

  const showModal = () => {
    isShowModal.value = true;
  };

  const del = async (id: number) => {
    await delClientSalesman({ id });
    tableTurnRef.value.loadData();
  };
</script>

<style scoped lang="less">
  .bussiness-manager {
    padding: 0px 20px;
  }

  :deep(.arco-space) {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
  }
</style>
